<template>
  <div>
    <div class="main-window">
      <div class="circle">
        <!-- <a>
          <font-awesome-icon icon="chalkboard-teacher" class="tubiao" />
        </a> -->
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </div>
      <div class="messageofpeople">
        <center>
          <span class="name">{{name}}</span>
          <h6 class="date">{{date}}</h6>
        </center>
      </div>
      <div class="top-right">
        <div class="circle2">
          <!-- <center> -->
          <!-- <font-awesome-icon icon="crop-alt"
                               class="tubiao2" /> -->
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-fenxiang-copy"></use>
          </svg>
          <!-- </center> -->
        </div>
        <van-cell title="爱分享"
                  class="messageofright"
                  @click="showShare = true" />
        <van-share-sheet v-model="showShare"
                         title="立即分享给好友"
                         :options="options"
                         @select="onSelect" />
      </div>

      <div class="photo">
        <img :src="img" />
      </div>
      <div class="good">
        <font-awesome-icon @click="addLike"
                           v-if="isflag"
                           icon="heart"
                           style="color:#778899" />
        <font-awesome-icon @click="addLike"
                           v-if="!isflag"
                           icon="heart"
                           style="color:#FFB6C1" />
        <!-- <i class="far fa-comment"></i> -->
        <!-- 评论 -->
        <span style="margin-left:6px">{{ count }}</span>
        <font-awesome-icon @click="showModal=true"
                           icon="comment"
                           style="color:#FFB6C1;margin-left:20px" />
        <span style="margin-left:6px">{{ comment }}</span>
        <div class="mask"
             v-if="showModal">
          <!-- <span class="ofX" @click="showModal=false">x</span> -->
          <a class="aui_close ofX"
             @click="showModal=false">×</a>
          <center class="commentContainer">
            <center style="color:#778899;font-weight:bold;margin-top:4%">评论区</center>
            <hr>
            <div class="messageofcomment"
                 :key='index'
                 v-for='(item,index) in commentofmessage.slice(0,comment)'>
              <!-- <van-field label="用户"
                         :value="item.name"
                         readonly /> -->
              <van-field :label="item.name"
                         :value="item.meg"
                         readonly />
              <!-- <h3>{{item.name}}</h3> -->
              <h3 v-if='false'>{{index}}</h3>
              <!-- <span>评论：{{item.meg}}</span> -->
            </div>
            <!-- <input v-model="inputUser" type="text" placeholder="name:" />
            <input v-model="inputMeg" type="text" placeholder="message:" />
            <button @click="addMeg()">发表</button> -->
            <van-form>
              <!-- <van-field v-model="inputUser"
                         name="用户名"
                         label="用户名"
                         placeholder="用户名" /> -->
              <van-field v-model="inputMeg"
                         type="text"
                         name="评论"
                         label="评论"
                         placeholder="评论" />
              <div style="margin: 16px;">
                <van-button round
                            block
                            type="info"
                            @click="addMeg()"
                            native-type="submit"
                            style="backgroundColor:#72CACD;border:none">
                  提交
                </van-button>
              </div>
            </van-form>
          </center>
        </div>
        <!-- <div>
          <div class="mask" v-if="showModal" @click="showModal=false"></div>
          <div class="pop" v-if="showModal">
              <button @click="showModal=false" class="btn">点击出现弹框</button>
          </div>
          <button @click="showModal=true" class="btn">点击出现弹框</button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'CommunityMain',
  data () {
    return {
      showModal: false,
      commentofmessage: [
        { name: 'ckh:', meg: 'hello' },
        { name: 'ckh1:', meg: 'nihao' },
        { name: 'ckh1:', meg: 'nihao' }
      ],
      inputUser: 'fff',
      inputMeg: '',
      showShare: false,
      options: [
        { name1: '微信', icon: 'wechat' },
        { name1: '微博', icon: 'weibo' },
        { name1: '复制链接', icon: 'link' },
        { name1: '分享海报', icon: 'poster' },
        { name1: '二维码', icon: 'qrcode' }
      ]
    }
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    },
    comment: {
      type: Number,
      default: 0
    },
    isflag: {
      type: Boolean,
      default: true
    },
    index: {
      type: Number,
      required: true
    },
    img: {

    }
  },
  methods: {
    addLike () {
      this.$emit('addLike', this.index, this.count, this.isflag)
    },
    addMeg () {
      if (this.inputUser.trim().length === 0 && this.inputMeg.trim().length === 0) {
        return
      }
      this.$emit('addComment', this.index, this.comment)
      this.commentofmessage.push({ name: `${this.inputUser}:`, meg: this.inputMeg })
      this.inputUser = 'fff'
      this.inputMeg = ''
      this.message = ''
    },
    onSelect (option) {
      Toast(option.name1)
      this.showShare = false
    }
  }
}
</script>

<style scoped>
.ofX {
  position: flex;
  float: right;
  background-color: none;
}
.mask {
  background-color: white;
  border: 1px solid grey;
  /* opacity: 0.9; */
  position: fixed;
  top: 25%;
  left: 4%;
  width: 93%;
  height: 35%;
  border-radius: 5%;
  z-index: 1;
}
.main-window {
  width: 98%;
  height: 340px;
  /* border: 1px solid black; */
  margin: 5% 1% 1% 1%;
}

.tubiao {
  font-size: 22px;
  color: white;
  margin: 5px 3px 3px 2px;
}
.name {
  margin-top: 0%;
  margin-bottom: 2px;
  font-size: 14px !important;
  display: inline-block;
}
.messageofright {
  width: auto;
  height: auto;
  /* background-color: #07c160; */
  /* text-shadow: 1px 1px 3px rgb(114, 202, 205); */
  font-weight: bolder;
  font-size: larger;
  color: rgb(114, 202, 205);
  font-size: 2.5px;
  margin-left: 12px;
  margin-top: -35px;
  /* z-index: -1; */
}
.messageofpeople {
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  widows: auto;
}
.date {
  color: grey;
  margin-top: 0px;
  font-size: 3px;
}
.photo {
  /* border: 1px solid black; */
  width: 90%;
  height: 55%;
  margin: 5% 5%;
}
.photo img {
  width: 100%;
  height: 100%;
}
.circle {
  width: 32px;
  height: 32px;
  /* border: 1px solid black; */
  display: inline-block;
  border-radius: 50%;
  /* background-color: rgb(97, 204, 161); */
}
.top-right {
  /* display: inline-block; */
  width: 80px;
  height: auto;
  color: grey;
  float: right;
  margin: 15px 15px;
  display: inline;
}
.tubiao2 {
  color: white;
  display: inline-block;
}
.circle2 {
  width: 20px;
  height: 20px;
  /* border: 1px solid black; */
  display: inline-block;
  border-radius: 50%;
  /* background-color: rgb(114, 202, 205); */
  margin-left: -8px;
  /* z-index: 1; */
}
.good {
  width: auto;
  height: auto;
  /* border:none; */
  margin: -10px 15px;
  background-color: white;
}
.tubiao3 {
  /* color:white; */
  border: black;
}
.messageofcomment {
  border-bottom: 1px solid black;
  width: 95%;
  height: 10%;
  margin-bottom: 5%;
  /* background-color: rgb(114, 202, 205); */
}
.messageofcomment h3 {
  font-size: 1rem;
}
.commentContainer {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.aui_close {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: block;
  /* position: absolute; */
  left: 10px;
  top: 10px;
  font-family: Helvetica, STHeiti;
  _font-family: "\u9ed1\u4f53", "Book Antiqua", Palatino;
  font-size: 18px;
  border-radius: 20px;
  background: #999;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-transition: linear 0.06s;
  -webkit-transition: linear 0.06s;
  transition: linear 0.06s;
  padding: 0;
  text-align: center;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  z-index: 1;
  margin-top: 5px;
  margin-right: 5px;
}
.top-right > .van-cell {
  padding: 0 !important;
  margin-top: -22px;
}
/* 点击事件和mouseover事件会产生冲突  */
/*
  .aui_close:hover {
  width: 24px;
  height: 24px;
  line-height: 24px;
  left:8px;
  top:8px;
  color: #FFF;
  box-shadow: 0 1px 3px rgba(209, 40, 42, .5);
  background: #d1282a;
  border-radius: 24px;
  transition: all 0.2s ease-out;
  opacity: 0.8;
} */
</style>
